{% extends "base.html" %}

{% block title %}首页 - 个人博客{% endblock %}

{% block content %}
<div class="row">
    <!-- Main Content -->
    <div class="col-lg-8">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>最新文章</h2>
            <div class="text-muted">
                共 {{ posts.total }} 篇文章
            </div>
        </div>

        {% if posts.items %}
            {% for post in posts.items %}
            <article class="card mb-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <h3 class="card-title h4 mb-0">
                            <a href="{{ url_for('main.post_detail', slug=post.slug) }}" 
                               class="text-decoration-none text-dark">
                                {{ post.title }}
                            </a>
                        </h3>
                        {% if post.is_featured %}
                        <span class="badge bg-warning text-dark">
                            <i class="fas fa-star"></i> 推荐
                        </span>
                        {% endif %}
                    </div>
                    
                    <div class="text-muted small mb-3">
                        <i class="fas fa-user"></i> {{ post.author.username }}
                        <i class="fas fa-calendar ms-3"></i> {{ post.created_at.strftime('%Y-%m-%d') }}
                        <i class="fas fa-eye ms-3"></i> {{ post.view_count }} 次浏览
                        {% if post.category %}
                        <i class="fas fa-folder ms-3"></i> 
                        <a href="{{ url_for('main.category_posts', slug=post.category.slug) }}" 
                           class="text-decoration-none">{{ post.category.name }}</a>
                        {% endif %}
                    </div>
                    
                    {% if post.excerpt %}
                    <p class="card-text">{{ post.excerpt }}</p>
                    {% else %}
                    <p class="card-text">{{ post.content_html[:200] | striptags }}...</p>
                    {% endif %}
                    
                    {% if post.tags %}
                    <div class="mb-3">
                        {% for tag in post.tags %}
                        <a href="{{ url_for('main.tag_posts', slug=tag.slug) }}" 
                           class="badge bg-secondary text-decoration-none me-1">
                            {{ tag.name }}
                        </a>
                        {% endfor %}
                    </div>
                    {% endif %}
                    
                    <a href="{{ url_for('main.post_detail', slug=post.slug) }}" 
                       class="btn btn-outline-primary btn-sm">
                        阅读全文 <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </article>
            {% endfor %}

            <!-- Pagination -->
            {% if posts.pages > 1 %}
            <nav aria-label="文章分页">
                <ul class="pagination justify-content-center">
                    {% if posts.has_prev %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for('main.index', page=posts.prev_num) }}">上一页</a>
                    </li>
                    {% endif %}
                    
                    {% for page_num in posts.iter_pages() %}
                        {% if page_num %}
                            {% if page_num != posts.page %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for('main.index', page=page_num) }}">{{ page_num }}</a>
                            </li>
                            {% else %}
                            <li class="page-item active">
                                <span class="page-link">{{ page_num }}</span>
                            </li>
                            {% endif %}
                        {% else %}
                        <li class="page-item disabled">
                            <span class="page-link">...</span>
                        </li>
                        {% endif %}
                    {% endfor %}
                    
                    {% if posts.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for('main.index', page=posts.next_num) }}">下一页</a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
            {% endif %}
        {% else %}
        <div class="text-center py-5">
            <i class="fas fa-file-alt fa-3x text-muted mb-3"></i>
            <h4 class="text-muted">暂无文章</h4>
            <p class="text-muted">还没有发布任何文章，请稍后再来查看。</p>
        </div>
        {% endif %}
    </div>

    <!-- Sidebar -->
    <div class="col-lg-4">
        <!-- Search -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-search"></i> 搜索</h5>
            </div>
            <div class="card-body">
                <form method="GET" action="{{ url_for('main.search') }}">
                    <div class="input-group">
                        <input type="text" class="form-control" name="q" placeholder="搜索文章..." 
                               value="{{ request.args.get('q', '') }}">
                        <button class="btn btn-outline-secondary" type="submit">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Categories -->
        {% if categories %}
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-folder"></i> 分类</h5>
            </div>
            <div class="card-body">
                <div class="list-group list-group-flush">
                    {% for category in categories %}
                    <a href="{{ url_for('main.category_posts', slug=category.slug) }}" 
                       class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        {{ category.name }}
                        <span class="badge bg-primary rounded-pill">{{ category.posts.filter_by(is_published=True).count() }}</span>
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Tags -->
        {% if tags %}
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-tags"></i> 标签</h5>
            </div>
            <div class="card-body">
                {% for tag in tags %}
                <a href="{{ url_for('main.tag_posts', slug=tag.slug) }}" 
                   class="badge bg-secondary text-decoration-none me-1 mb-1">
                    {{ tag.name }}
                </a>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

